import React, { useState } from 'react'
import { TabBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './tab.scss'
import {
    AppOutline,
    UserOutline,
    GiftOutline,
    ArrowsAltOutline,
    EnvironmentOutline
} from 'antd-mobile-icons'
const tabs = [
    {
        key: '/Home',
        title: '首页',
        icon: <AppOutline />,
    },
    {
        key: '/Hotel',
        title: '视频',
        icon: <GiftOutline />,
    },
    {
        key: '/Travel',
        title: '目的地',
        icon: <EnvironmentOutline />
    },
    {
        key: '/aaa',
        title: '消息',
        icon: <ArrowsAltOutline />
    },
    {
        key: '/My',
        title: '我的',
        icon: <UserOutline />,
    },
]
function Tab() {
    return (
        <div>
            <TabBar className='tab'>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Tab
